.fade-enter-active,
.fade-leave-active {
  transition: opacity .3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-long-enter-active,
.fade-long-leave-active {
  transition: opacity 1s;
}

.fade-long-enter,
.fade-long-leave-to {
  opacity: 0;
}
@keyframes hideStatus { /*隐藏*/
  from {opacity: 0;}
  to {opacity: 0;}
}
@keyframes stayStatus { /*b保持不变藏*/
  from {opacity: 1;}
  to {opacity: 1;}
}
@keyframes backIn {
  from {background: rgba(0,0,0,0)}
  to {background: rgba(0,0,0,.7)}
}
@keyframes backOut {
  from {background: rgba(0,0,0,.7)}
  to {background: rgba(0,0,0,0)}
}
@keyframes FadeIn { /*淡入*/
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes FadeOut { /*淡出*/
  from {opacity: 1;}
  to {opacity: 0;}
}
@keyframes bottomMoveToCenter { /*下方到原来位置*/
  /* 0% {transform: translateY(32px) translate(-50%, -50%);}
   100% {transform: translateY(0) translate(-50%, -50%);}*/
  from {transform: translateY(32px);}
  to {transform: translateY(0)}
}
@keyframes centerMoveToTop { /*原来位置到上方*/
  /*from {transform: translateY(0px) translate(-50%, -50%);}
  to {transform: translateY(-32px) translate(-50%, -50%);}*/
  from {transform: translateY(0px)}
  to {transform: translateY(-32px);}
}
@keyframes bigger { /*变大*/
  from {transform: scale(1)}
  to {transform: scale(1.25)}
}
@keyframes biggerIn { /*大入*/
  0% {transform: scale(0,0)}
  100% {transform: scale(1.15,1.15)}
}
@keyframes shake { /*抖动*/
  0% {transform: scale(1.15,1.15)}
  33.33% {transform: scale(.8,.8)}
  66.66% {transform: scale(1.05,1.05)}
  100% { transform: scale(1,1)}
}
@keyframes fall { /*下降*/
  from {transform: translateY(-100%)}
  to {transform: translateY(0)}
}
@keyframes riseOut { /*升起离开*/
  from {transform: translateY(0)}
  to {transform: translateY(-100%)}
}
@keyframes rise { /*升起*/
  from {transform: translateY(100%)}
  to {transform: translateY(0)}
}
@keyframes fallOut { /*下降离开*/
  from {transform: translateY(0)}
  to {transform: translateY(100%)}
}
@keyframes shiftLeft { /*下降离开*/
  from {transform: translate(-100%, 0)}
  to {transform: translate(0, 0)}
}
@keyframes shiftLeftBack { /*下降离开*/
  from {transform: translate(0, 0)}
  to {transform: translate(-100%, 0)}
}
.popup-enter{
  opacity: 0;
}
.popup-enter-active{
  animation: FadeIn 250ms ease-out;
  -moz-animation:FadeIn 250ms ease-out;	/* Firefox */
  -webkit-animation:FadeIn 250ms ease-out;	/* Safari 和 Chrome */
  -o-animation:FadeIn 250ms ease-out;
}
.popup-enter-active>*{
  animation: hideStatus 180ms, bottomMoveToCenter 70ms ease-out 180ms;
  -moz-animation: hideStatus 180ms, bottomMoveToCenter 70ms ease-out 180ms;	/* Firefox */
  -webkit-animation: hideStatus 180ms, bottomMoveToCenter 70ms ease-out 180ms;	/* Safari 和 Chrome */
  -o-animation: hideStatus 180ms, bottomMoveToCenter 70ms ease-out 180ms;
}
.popup-enter-active>[class*='mask']{
  animation: inherit;
  -moz-animation: inherit;	/* Firefox */
  -webkit-animation:inherit;	/* Safari 和 Chrome */
  -o-animation:inherit;
}
.popup-leave-active{
  transition-duration: 250ms;
  animation: FadeOut 250ms ease-in;
  -moz-animation: FadeOut 250ms ease-in;	/* Firefox */
  -webkit-animation: FadeOut 250ms ease-in;	/* Safari 和 Chrome */
  -o-animation: FadeOut 250ms ease-in;
}
.popup-leave-active>div:not([class*='mask']){
  animation: centerMoveToTop 250ms ease-in;
  -moz-animation: centerMoveToTop 250ms ease-in;	/* Firefox */
  -webkit-animation: centerMoveToTop 250ms ease-in;	/* Safari 和 Chrome */
  -o-animation: centerMoveToTop 250ms ease-in;
}
.popup-leave-to{
  opacity: 0;
}
.popup-leave-to>*{
  transform: translateY(-32px) translate(-50%, -50%);
}
.activity-enter-active{
  animation: fadeIn 180ms ease-out,stayStatus 400ms ease 180ms;
  -moz-animation: fadeIn 180ms ease-out,stayStatus 400ms ease 180ms;	/* Firefox */
  -webkit-animation: fadeIn 180ms ease-out,stayStatus 400ms ease 180ms;	/* Safari 和 Chrome */
  -o-animation: fadeIn 180ms ease-out,stayStatus 400ms ease 180ms;
}
.activity-enter-active>div{
  animation: biggerIn 280ms ease-out, shake 300ms ease 280ms;
  -moz-animation: biggerIn 280ms ease-out, shake 300ms ease 280ms;	/* Firefox */
  -webkit-animation: biggerIn 280ms ease-out, shake 300ms ease 280ms;	/* Safari 和 Chrome */
  -o-animation: biggerIn 280ms ease-out, shake 300ms ease 280ms;
}
.activity-leave-active{
  animation: FadeOut 280ms;
  -moz-animation: FadeOut 280ms;	/* Firefox */
  -webkit-animation: FadeOut 280ms;	/* Safari 和 Chrome */
  -o-animation: FadeOut 280ms;
}
.activity-leave-active>*{
  animation: bigger 280ms;
  -moz-animation: bigger 280ms;	/* Firefox */
  -webkit-animation: bigger 280ms;	/* Safari 和 Chrome */
  -o-animation: bigger 280ms;
}
.activity-leave-to{
  opacity: 0;
}
.fall-enter-active{
  animation: backIn 300ms;
  -moz-animation: backIn 300ms;	/* Firefox */
  -webkit-animation: backIn 300ms;	/* Safari 和 Chrome */
  -o-animation: backIn 300ms;
}
.fall-enter-active>div{
  animation: fall 300ms;
  -moz-animation: fall 300ms;	/* Firefox */
  -webkit-animation: fall 300ms;	/* Safari 和 Chrome */
  -o-animation: fall 300ms;
}
.fall-leave-active{
  animation: backOut 300ms;
  -moz-animation: backOut 300ms;	/* Firefox */
  -webkit-animation: backOut 300ms;	/* Safari 和 Chrome */
  -o-animation: backOut 300ms;
}
.fall-leave-active>.jalendar{
  animation: riseOut 300ms;
  -moz-animation: riseOut 300ms;	/* Firefox */
  -webkit-animation: riseOut 300ms;	/* Safari 和 Chrome */
  -o-animation: riseOut 300ms;
}
.fall-leave-to>*{
  transform: translateY(-100%);
  opacity: 0;
}
.rise-enter-active{
  animation: backIn 300ms;
  -moz-animation: backIn 300ms;	/* Firefox */
  -webkit-animation: backIn 300ms;	/* Safari 和 Chrome */
  -o-animation: backIn 300ms;
}
.rise-enter-active>div{
  animation: rise 300ms;
  -moz-animation: rise 300ms;	/* Firefox */
  -webkit-animation: rise 300ms;	/* Safari 和 Chrome */
  -o-animation: rise 300ms;
}
.rise-leave-active{
  animation: backOut 300ms;
  -moz-animation: backOut 300ms;	/* Firefox */
  -webkit-animation: backOut 300ms;	/* Safari 和 Chrome */
  -o-animation: backOut 300ms;
}
.rise-leave-active>div{
  animation: fallOut 300ms;
  -moz-animation: fallOut 300ms;	/* Firefox */
  -webkit-animation: fallOut 300ms;	/* Safari 和 Chrome */
  -o-animation: fallOut 300ms;
}
.rise-leave-to{
  background: rgba(0,0,0,0);
}
.rise-leave-to>div{
  transform: translateY(100%)
}
.shiftLeft-enter-active{
  animation: shiftLeft 300ms;
  -moz-animation: shiftLeft 300ms;	/* Firefox */
  -webkit-animation: shiftLeft 300ms;	/* Safari 和 Chrome */
  -o-animation: shiftLeft 300ms;
}
.shiftLeft-leave-to{
  animation: shiftLeftBack 300ms;
  -moz-animation: shiftLeftBack 300ms;	/* Firefox */
  -webkit-animation: shiftLeftBack 300ms;	/* Safari 和 Chrome */
  -o-animation: shiftLeftBack 300ms;
}
